<template>
  <div class="wrap">
    <v-overlay :value="formLoading" :opacity="0.5">
      <v-progress-circular
        class="mb-5"
        indeterminate
        :size="110"
        :width="20"
      ></v-progress-circular>
    </v-overlay>
    <div class="text">
      <div>Leazer Fspace</div>
      <div style="font-size: 66px">给您最优质的会议体验</div>
    </div>
    <div class="ball"></div>
    <div class="ball-red"></div>
    <v-slide-x-transition>
      <div class="form-wrap" v-show="loginShow">
        <v-form ref="loginForm" v-model="valid" autocomplete="new-password">
          <v-text-field
            class="mt-5"
            v-model="loginForm.email"
            :rules="emailRules"
            label="邮箱"
            required
            autocomplete="new-password"
          ></v-text-field>
          <v-text-field
            class="mt-5"
            v-model="loginForm.password"
            :rules="passwordRules"
            label="密码"
            :type="loginForm.pdShow ? 'text' : 'password'"
            required
            :append-icon="loginForm.pdShow ? 'mdi-eye' : 'mdi-eye-off'"
            @click:append="loginForm.pdShow = !loginForm.pdShow"
            autocomplete="new-password"
          ></v-text-field>
          <v-row class="mt-5">
            <v-col cols="3">
              <div
                v-html="loginForm.svg"
                class="imgcode"
                @click="getCaptcha"
              ></div>
            </v-col>
            <v-col cols="9">
              <v-otp-input
                ref="loginSvg"
                v-model="loginForm.captchaText"
                :length="4"
                @finish="login"
              ></v-otp-input>
            </v-col>
          </v-row>
          <v-btn
            color="primary"
            class="mt-5 float-right"
            depressed
            large
            outlined
            @click="gotoRegister"
            >注册账户</v-btn
          >
          <v-btn
            color="primary"
            class="mt-5 mr-4 float-right"
            depressed
            large
            outlined
            @click="gotoReset"
            >重置密码</v-btn
          >
        </v-form>
      </div>
    </v-slide-x-transition>

    <v-slide-x-transition>
      <div class="register-form-wrap" v-show="registerShow">
        <v-form ref="registerForm" v-model="valid" autocomplete="new-password">
          <v-row class="mt-5">
            <v-col cols="8">
              <v-text-field
                v-model="registerForm.email"
                :rules="emailRules"
                label="邮箱"
                required
                autocomplete="new-password"
              ></v-text-field>
            </v-col>
            <v-col cols="4">
              <v-btn
                color="primary"
                class="mt-3 ml-5"
                outlined
                @click="registerAuthcode"
                >获取验证码</v-btn
              >
            </v-col>
          </v-row>
          <v-text-field
            class="mt-5"
            v-model="registerForm.authcode"
            :rules="authcodeRules"
            label="邮箱验证码"
            required
            autocomplete="new-password"
          ></v-text-field>
          <v-text-field
            class="mt-5"
            v-model="registerForm.password"
            :rules="passwordRules"
            label="密码"
            :type="registerForm.pdShow ? 'text' : 'password'"
            required
            :append-icon="registerForm.pdShow ? 'mdi-eye' : 'mdi-eye-off'"
            @click:append="registerForm.pdShow = !registerForm.pdShow"
            autocomplete="new-password"
          ></v-text-field>
          <v-text-field
            class="mt-5"
            v-model="registerForm.cpassword"
            :rules="passwordRules"
            label="再次输入密码"
            :type="registerForm.cpdShow ? 'text' : 'password'"
            required
            :append-icon="registerForm.cpdShow ? 'mdi-eye' : 'mdi-eye-off'"
            @click:append="registerForm.cpdShow = !registerForm.cpdShow"
            autocomplete="new-password"
          ></v-text-field>
          <v-text-field
            class="mt-5"
            v-model="registerForm.nickname"
            :rules="nicknameRules"
            label="昵称"
            required
            autocomplete="new-password"
          ></v-text-field>
          <v-text-field
            class="mt-5"
            v-model="registerForm.realname"
            :rules="realnameRules"
            label="真实姓名"
            required
            autocomplete="new-password"
          ></v-text-field>
          <v-text-field
            class="mt-5"
            v-model="registerForm.phone"
            :rules="phoneRules"
            label="手机号码"
            required
            autocomplete="new-password"
          ></v-text-field>
          <v-select
            :items="['学生', '教师', '其他']"
            label="请选择身份"
            :rules="identityRules"
            v-model="registerForm.identity"
          ></v-select>
          
          <v-btn
            color="primary"
            class="mt-5 float-right"
            depressed
            large
            outlined
            @click="register"
            >注册</v-btn
          >
          <v-btn
            color="primary"
            class="mt-5 mr-4 float-right"
            depressed
            large
            outlined
            @click="gotoLogin"
            >去登陆</v-btn
          >
        </v-form>
      </div>
    </v-slide-x-transition>

    <v-slide-x-transition>
      <div class="form-wrap" v-show="resetShow">
        <v-form ref="resetForm" v-model="valid" autocomplete="new-password">
          <v-row class="mt-5">
            <v-col cols="8">
              <v-text-field
                v-model="resetForm.email"
                :rules="emailRules"
                label="邮箱"
                required
                autocomplete="new-password"
              ></v-text-field>
            </v-col>
            <v-col cols="4">
              <v-btn
                color="primary"
                class="mt-3 ml-5"
                outlined
                @click="resetAuthcode"
                >获取验证码</v-btn
              >
            </v-col>
          </v-row>
          <v-text-field
            class="mt-5"
            v-model="resetForm.authcode"
            :rules="authcodeRules"
            label="邮箱验证码"
            required
            autocomplete="new-password"
          ></v-text-field>
          <v-text-field
            class="mt-5"
            v-model="resetForm.password"
            :rules="passwordRules"
            label="密码"
            :type="resetForm.pdShow ? 'text' : 'password'"
            required
            :append-icon="resetForm.pdShow ? 'mdi-eye' : 'mdi-eye-off'"
            @click:append="resetForm.pdShow = !resetForm.pdShow"
            autocomplete="new-password"
          ></v-text-field>
          <v-text-field
            class="mt-5"
            v-model="resetForm.cpassword"
            :rules="passwordRules"
            label="再次输入密码"
            :type="resetForm.cpdShow ? 'text' : 'password'"
            required
            :append-icon="resetForm.cpdShow ? 'mdi-eye' : 'mdi-eye-off'"
            @click:append="resetForm.cpdShow = !resetForm.cpdShow"
            autocomplete="new-password"
          ></v-text-field>
          <v-btn
            color="primary"
            class="mt-5 float-right"
            depressed
            large
            outlined
            @click="reset"
            >重置密码</v-btn
          >
          <v-btn
            color="primary"
            class="mt-5 mr-4 float-right"
            depressed
            large
            outlined
            @click="gotoLogin"
            >去登陆</v-btn
          >
        </v-form>
      </div>
    </v-slide-x-transition>
  </div>
</template>

<script>
import { captcha, login, reset, register, authcode } from '@/api/oper'
export default {
  name: 'login',
  data() {
    return {
      valid: false,

      formLoading: false,

      loginShow: true,
      registerShow: false,
      resetShow: false,

      loginForm: {
        email: '',
        password: '',
        pdShow: false,
        captchaText: '',
        svg: '',
        svgId: ''
      },

      resetForm: {
        email: '',
        authcode: '',
        password: '',
        cpassword: '',
        pdShow: false,
        cpdShow: false
      },

      registerForm: {
        email: '',
        authcode: '',
        password: '',
        cpassword: '',
        pdShow: false,
        cpdShow: false,
        nickname: '',
        realname: '',
        phone: '',
        identity: ''
      },

      emailRules: [
        (v) => !!v || '请输入邮箱',
        (v) =>
          /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(
            v
          ) || '邮箱格式有误'
      ],
      passwordRules: [
        (v) => !!v || '请输入密码',
        (v) =>
          /^(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9~!@&%#_]{8,16}$/.test(v) ||
          '密码必至少包含一个大写字母和小写字母，且长度为8到16位'
      ],
      authcodeRules: [
        (v) => !!v || '请输入验证码',
        (v) => /\d{6}/.test(v) || '验证码必须位6位数字'
      ],
      nicknameRules: [
        (v) => !!v || '请输入昵称'
      ],
      realnameRules: [
        (v) => !!v || '请输入真实姓名'
      ],
      phoneRules: [
        (v) => !!v || '请输入手机号码',
        (v) => /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(v) || '手机号码格式有误'
      ],
      identityRules: [
        (v) => !!v || '请选择身份',
        (v) => ['学生', '教师', '其他'].includes(v) || '身份不正确'
      ]
    }
  },
  mounted() {
    this.getCaptcha()
  },
  methods: {
    login() {
      if (!this.$refs.loginForm.validate()) {
        return
      }
      this.formLoading = true
      login({
        email: this.loginForm.email,
        password: this.loginForm.password,
        captchaId: this.loginForm.svgId,
        captchaText: this.loginForm.captchaText
      })
        .then((res) => {
          localStorage.setItem('token', res.data.data.token)
          this.$toast.success('登陆成功，即将进入主页')
          this.$store.dispatch('getUserinfo')
          setTimeout(() => {
            this.$router.replace('/')
          }, 1000)
        })
        .catch(() => {
          this.loginForm.captchaText = ''
          this.$refs.loginSvg.focus()
          this.getCaptcha()
        })
        .complete(() => {
          setTimeout(() => {
            this.formLoading = false
          }, 1000)
        })
    },
    reset() {
      if (!this.$refs.resetForm.validate()) {
        return
      }
      if (this.resetForm.password !== this.resetForm.cpassword) {
        this.$toast.error('两次密码输入不一致')
        return
      }
      reset({
        email: this.resetForm.email,
        authcode: this.resetForm.authcode,
        password: this.resetForm.password
      })
        .then(() => {
          this.$toast.success('重置密码成功，请登录')
          this.gotoLogin()
        })
        .catch(() => {})
    },
    register() {
      if (!this.$refs.registerForm.validate()) {
        return
      }
      if (!['学生', '教师', '其他'].includes(this.registerForm.identity)) {
        this.$toast.error('请选择您的身份')
      }
      if (this.registerForm.password !== this.registerForm.cpassword) {
        this.$toast.error('两次密码输入不一致')
        return
      }
      register({
        email: this.registerForm.email,
        authcode: this.registerForm.authcode,
        password: this.registerForm.password,
        nickname: this.registerForm.nickname,
        realname: this.registerForm.realname,
        phone: this.registerForm.phone,
        identity: this.registerForm.identity
      }).then(() => {
        this.$toast.success('注册成功')
        this.gotoLogin()
      }).catch(() => {})
    },
    resetAuthcode() {
      if (!this.resetForm.email) {
        this.$toast.error('请输入邮箱')
        return
      }
      if (
        !/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(
          this.resetForm.email
        )
      ) {
        this.$toast.error('邮箱格式不正确')
        return
      }
      authcode({
        email: this.resetForm.email,
        type: 'reset'
      })
        .then(() => {
          this.$toast.success('验证码获取成功，请稍等片刻去邮箱查看')
        })
        .catch(() => {})
    },
    registerAuthcode() {
      if (!this.registerForm.email) {
        this.$toast.error('请输入邮箱')
        return
      }
      if (
        !/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(
          this.registerForm.email
        )
      ) {
        this.$toast.error('邮箱格式不正确')
        return
      }
      authcode({
        email: this.registerForm.email,
        type: 'register'
      })
        .then(() => {
          this.$toast.success('验证码获取成功，请稍等片刻去邮箱查看')
        })
        .catch(() => {})
    },
    getCaptcha() {
      captcha().then((res) => {
        this.loginForm.svg = res.data.data.svg
        this.loginForm.svgId = res.data.data.svgId
      })
    },
    gotoReset() {
      this.loginShow = false
      this.registerShow = false
      this.resetShow = true
    },
    gotoRegister() {
      this.loginShow = false
      this.resetShow = false
      this.registerShow = true
    },
    gotoLogin() {
      this.resetShow = false
      this.registerShow = false
      this.loginShow = true
    }
  }
}
</script>

<style scoped>
.wrap {
  width: 100vw;
  height: 100vh;
  /* background: url('../../assets/bk.jpg'); */
  background: white;
  background: rgb(248, 248, 248);
}
.form-wrap {
  position: fixed;
  right: 0;
  top: 0;
  padding: 150px 70px 80px 80px;
  width: 600px;
  height: 100%;
  background: rgba(255, 255, 255, 0.411);
  border-radius: 100px 0 0 100px;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.082);
  backdrop-filter: blur(8px);
}
.register-form-wrap {
  position: fixed;
  right: 0;
  top: 0;
  padding: 60px 70px 80px 80px;
  width: 600px;
  height: 100%;
  background: rgba(255, 255, 255, 0.411);
  border-radius: 100px 0 0 100px;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.082);
  backdrop-filter: blur(8px);
}
.text {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 0 140px 140px;
  height: 100vh;
  font-size: 178px;
  font-weight: bold;
  color: #343434;
}
.imgcode {
  margin: 8px 0 0 0;
  height: 50px;
  width: 96px;
  border-radius: 6px;
  border: 3px solid white;
}
.ball {
  position: fixed;
  left: -600px;
  top: -600px;
  width: 1700px;
  height: 1700px;
  background-image: radial-gradient(circle, #42a4f5c5, #ffffff00 70%);
  animation: ball-run 64s infinite alternate;
}
.ball-red {
  position: fixed;
  left: 300px;
  top: 100px;
  width: 1700px;
  height: 1700px;
  background-image: radial-gradient(circle, #e980fcce, #ffffff00 70%);
  animation: ballred-run 64s infinite alternate;
}
@keyframes ball-run {
  0% {
    left: -600px;
    top: -600px;
  }
  20% {
    left: -800px;
    top: -400px;
  }
  40% {
    left: 400px;
    top: -800px;
  }
  60% {
    left: 900px;
    top: -300px;
  }
  80% {
    left: 200px;
    top: -700px;
  }
  100% {
    left: -900px;
    top: -500px;
  }
}
@keyframes ballred-run {
  0% {
    left: 300px;
    top: 100px;
  }
  20% {
    left: 800px;
    top: -100px;
  }
  40% {
    left: 0px;
    top: 500px;
  }
  60% {
    left: -600px;
    top: 100px;
  }
  80% {
    left: -100px;
    top: 200px;
  }
  100% {
    left: 600px;
    top: -400px;
  }
}
</style>
